<template>
	<view class="student">
		<u-navbar :border-bottom="false" title="选择学生" :is-back="false"></u-navbar>
		<u-checkbox-group @change="checkboxGroupChange" v-if="studentList.length != 0">
			<u-collapse>
				<u-collapse-item ref='collapseItem' v-for="(item,index) in studentList" :key="index">
					<view slot="title" @click.stop.native="()=>{return false;}" >
						<u-checkbox icon-size="28" size="40" class="box" :disabled="defaultValue.studentId.length!=0?true:false" @change="checkboxChange" v-model="item.isCheck" :name="item.id">
							{{item.text}}
						</u-checkbox>
					</view>
					<u-collapse :arrow="false" :body-style="{height:'auto'}" :head-style="{padding:0}" :item-style="{marginLeft:'24rpx'}">
						<u-collapse-item v-for="(item2,index2) in item.children" :key="index2">
							<view slot="title" style="padding: 0;">
								<u-checkbox class="acea-row row-middle" icon-size="28" size="40" :disabled="defaultValue.studentId.length!=0?true:false" @change="(e)=>checkboxChangeStudent(e,item.id)" v-model="item2.isCheck" :name="item2.id">
									<view class="acea-row row-middle">
										<image style="width: 72rpx;margin-left: 16rpx;height: 72rpx;border-radius: 8rpx;" :src="baseUrl+item2.icon" mode=""></image>
										<view style="font-size: 32rpx;width: 420rpx;margin-left: 25rpx;height: 114rpx;line-height: 114rpx;border-bottom: 2rpx solid #ebedf0;">
											{{item2.text}}
											<text v-if="defaultValue.studentId.length!=0&&item2.statusName">({{item2.statusName}})</text>
										</view>
									</view>
								</u-checkbox>
							</view>
						</u-collapse-item>
					</u-collapse>
				</u-collapse-item>
			</u-collapse>
			<!-- <view style="height: 112rpx;"></view> -->
		</u-checkbox-group>
		<u-empty text="暂无学员" mode="list" v-else margin-top="32"></u-empty>
		<view :style="'height: calc(120rpx + '+iosSafeBottom+'px + '+SafeBottom+'rpx);'"></view>
		<view style="height: 120rpx;position: fixed;width: 100%;left: 0;bottom: 0rpx;z-index: 99;background-color: #FFFFFF;box-sizing: content-box;" :style="'padding-bottom: calc('+iosSafeBottom+'px + '+SafeBottom+'rpx);'">
			<view class="btn" @click="ok">{{defaultValue.studentId.length!=0||studentList.length==0?'退出':'确定选择'}}</view>
		</view>
	</view>
</template>

<script>
	import request from '../../api/request.js'
	const app = getApp()
	export default{
		props:{
			show:{
				type:Boolean,
				default:false
			},
			value:{
				type:Object,
				default:{
					studentId:[]
				}
			},
			defaultValue:{
				type:Object,
				default:{
					studentId:[]
				}
			}
		},
		data(){
			return{
				baseUrl:app.globalData.baseUrl,
				navbarHeight:app.globalData.navbarHeight,
				iosSafeBottom:app.globalData.iosSafeBottom,
				SafeBottom:app.globalData.iosSafeBottom==0?'24':'-24',
				studentList:[],
				// defaultValue:{
				// 	studentId:[]
				// }
			}
		},
		onShow() {
			
		},
		methods:{
			init(){
				if(this.studentList.length == 0){
					//this.getData()
					setTimeout(()=>{
						// this.studentList = studentList
						this.getStudentList()
					},300)
				}
			},
			ok(){
				this.$emit('update:show',false)
			},
			getStudentList(){
				request.go((e)=>{
					let data = e.data
					let studentId = this.defaultValue.studentId
					for(let i of data){
						for(let j of i.children){
							if(studentId.length != 0){
								let f = studentId.find(s=>s.id == j.id)
								if(f){
									j.isCheck = true
									j.statusName = f.state==1?'已阅读':'未阅读'
								}else{
									j.isCheck = false
								}
							}else{
								j.isCheck = false
							}
						}
						if(studentId.length != 0 && i.children.length != 0){
							if(i.children.filter(o=>o.isCheck).length == i.children.length){
								i.isCheck = true
							}else{
								i.isCheck = false
							}
						}else{
							i.isCheck = false
						}
					}
					this.studentList = data
					this.checkboxGroupChange()
				},'/Jwteachertask/studentlist',{},"POST")
			},
			checkboxChange(res){
				let f = this.studentList.find(e=>e.id == res.name)
				for(let i of f.children){
					i.isCheck = res.value
				}
			},
			checkboxChangeStudent(res,pid){
				setTimeout(()=>{
					let f = this.studentList.find(e=>e.id == pid)
					let l = f.children.filter(e=>e.isCheck).length
					if(l == f.children.length){
						f.isCheck = true
					}else{
						f.isCheck = false
					}
				},0)
			},
			checkboxGroupChange(){
				//处理输出数据
				let studentList = this.studentList
				let obj = {
					title:'',
					studentId:[],
					data:[]
				}
				for(let i of studentList){
					for(let j of i.children){
						if(j.isCheck){
							let o = {
								banji_id:i.otherid,
								stu_id:j.id
							}
							obj.title += j.text + ','
							obj.studentId.push(j.id)
							obj.data.push(o)
						}
					}
				}
				obj.studentId = [...new Set(obj.studentId)] //去重
				obj.title = obj.title.substring(0,obj.title.length-1)
				this.$emit("update:value",obj)
				// console.log("checkboxGroupChange",obj)
			}
		},
		watch:{
			show(e){
				//触发$nextTick解决在pop展示状态先，u-collapse-item下拉无内容
				if(e){
					// this.defaultValue = JSON.parse(JSON.stringify(this.value))
					this.init()
				}
			}
		}
	}
</script>

<style scoped>
	.student {
		padding: 0 32rpx;
		box-sizing: border-box;
	}
	.student >>> .u-collapse-body{
		height: auto;
	}
	.student .btn{
		width: 622rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ffffff;
		/* z-index: 99; */
		background-color: #1661FF;
		margin: 24rpx auto 0;
		/* position: fixed; */
		/* bottom: 20rpx; */
		/* left: 50%; */
		/* transform: translateX(-50%); */
	}
</style>
